<template>
  <div>
    <a-button @click="myPrint">打印</a-button>
    <div class="check-group">
      <el-checkbox-group v-model="state.checkedCities" @change="handleCheckedCitiesChange">
        <template v-for="(city, idx) in state.cities">
          <div class="check-wrap">
            <el-checkbox :label="city" :key="city" v-show="city.show">
              {{ city.name }}
              <!--<a class="check-group-a" @click="downloadSingleFile(city)">下载</a>-->
            </el-checkbox>
            <div class="annex-img" :id="city.type">
              <!-- start -->
              <img :src="imgUrl" v-for="imgUrl in city.imgsrc" style="height: 48px; width: 39px; margin-left: 33px" />
              <!-- end -->
            </div>
          </div>
        </template>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const state = reactive({
  cities: [
    { name: '湖南', type: '1', show: true, imgsrc: 'src/assets/img/logo.png' },
    { name: '四川', type: '2', show: true, imgsrc: 'src/assets/img/logo.png' }
  ],
  checkedCities: [],
  bdhtml: undefined
});
function handleCheckedCitiesChange(e) {
  console.log(e);
}
function myPrint() {
  //直接调用浏览器打印功能
  state.bdhtml = window.document.body.innerHTML;
  //定义打印区域起始字符，根据这个截取网页局部内容
  // sprnstr = "<div class=\"annex-img\" id=\"+'1,2'+\">"; //打印区域开始的标记
  // eprnstr = "</div>";   //打印区域结束的标记
  // prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr)+ 23);
  // prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
  let div12 = document.getElementById('1,2');
  let img12 = div12.getElementsByTagName('img');
  img12[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
  img12[1].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
  let div3 = document.getElementById('3');
  let img3 = div3.getElementsByTagName('img');
  img3[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
  let div4 = document.getElementById('4');
  let img4 = div4.getElementsByTagName('img');
  img4[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
  let div6 = document.getElementById('6');
  let img6 = div6.getElementsByTagName('img');
  img6[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
  if (this.claimDetails.isSpecial != 1) {
    let div5 = document.getElementById('5');
    let img5 = div5.getElementsByTagName('img');
    img5[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
    //还原网页打印内容
    window.document.body.innerHTML = div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML;
  } else {
    let div7 = document.getElementById('7');
    let img7 = div7.getElementsByTagName('img');
    img7[0].style.cssText = 'height: 500px; width: 400px; margin-left: 33px;';
    //还原网页打印内容
    window.document.body.innerHTML = div12.innerHTML + div3.innerHTML + div4.innerHTML + div6.innerHTML + div7.innerHTML;
  }
  // console.log((div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML + div7.innerHTML));
  // window.document.body.innerHTML = (div12.innerHTML + div3.innerHTML + div4.innerHTML + div5.innerHTML + div6.innerHTML + div7.innerHTML);
  // window.document.body.innerHTML = prnhtml;
  //开始打印
  window.print();

  //还原网页内容
  window.document.body.innerHTML = state.bdhtml;
  //刷新页面
  location.reload();
}
</script>

<style scoped>
.list {
  width: 100%;
  min-height: 100%;
  background: #f2f2f2;
}
</style>
